.split-container {
  position: relative;
  width: 100%;
  height: 90%; /* 或其他高度 */
  min-height: 300px;
}

.pane {
  position: absolute;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.preview-left-pane,
.real-left-pane {
  left: 0;
  background-color: lightblue; /* 示例颜色 */
}

.preview-right-pane,
.real-right-pane {
  right: 0;
  background-color: lightgreen; /* 示例颜色 */
}

.splitter {
  position: absolute;
  width: 5px;
  height: 100%;
  cursor: ew-resize;
  background-color: #ccc;
}

.splitter-helper {
  width: 100%;
  height: 100%;
  position: relative; /* 用于捕捉鼠标位置 */
}

.real-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none; /* 防止鼠标穿透影响底层元素 */
}

.real-pane {
  height: 100%; /* 确保实际子容器也占满分配的空间 */
  overflow-y: auto; /* 允许内容溢出时滚动 */
}
